<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      books:[
        {id:110, name:'lld', price:98},
        {id:111, name:'zzh', price:85},
        {id:112, name:'gj', price:85},
        {id:113, name:'sr', price:100}
      ]
    },
    // methods和computed区别：计算属性会进行缓存，如果多次使用，计算属性只会调用一次，性能比较好
    computed:{
      totalPrice:function(){
        let result=0
        for(let i=0; i<this.books.length; i++){
          result=result+this.books[i].price
        }
        return result
        // 00-ES6补充
        /*for (let i in this.books){
          this.books[i]
        }*/
        /*for(let book of this.books){

        }*/
        }
      }
  })

</script>
</body>
</html>